<template>
  <!-- 下载记录 -->
  <div>
    <!-- 表格数据 -->
    <div class="table_box" v-loading="downloadLoading">
      <el-table :data="tableData" ref="multipleTable" class="historyTable" style="width: 100%">
        <el-table-column prop="name" label="文件名" show-overflow-tooltip></el-table-column>

        <el-table-column prop="versionName" label="版本">
          <template #default="scope">
            {{ scope.row.versionName ? scope.row.versionName : '-' }}
          </template>
        </el-table-column>

        <el-table-column>
          <template v-slot:header="scope">
            <div style="display: flex; align-items: center">
              <span>下载人</span>
              <el-tooltip class="item" effect="dark" content="未登录时,下载人为ip" placement="top-start">
                <el-icon style="color: #9d9d9d; margin-left: 7px"><Warning /></el-icon>
                <!-- <i class="el-icon-warning-outline" style="color: #9d9d9d; marlin-left: 7px"></i> -->
              </el-tooltip>
            </div>
          </template>

          <template #default="scope">
            <div v-if="scope.row.createBy" class="peopleBox">
              <div class="people">
                <span>
                  {{ scope.row.createByName ? scope.row.createByName.slice(-2) : scope.row.createBy.slice(-2) }}
                </span>
              </div>
              {{ scope.row.createByName ? scope.row.createByName : scope.row.createBy }}
            </div>

            <div v-else>
              <span>{{ scope.row.loginIp }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="下载时间" width="150px"></el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="requestStr.page"
        :page-size="requestStr.size"
        layout="total, prev, pager, next"
        :total="requestStr.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import { ApiPerDownloadRecord } from '@/api/personDoc/personDocApi';
import { on } from 'events';
const downloadLoading = ref(false);
const tableData = ref([]);
const requestStr = reactive({
  page: 1,
  size: 10,
  total: 0
});
const parentOdj = ref({});

const props = defineProps({
  fileDetailInfo: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

//获取表格数据
const getList = (row) => {
  console.log('row获取表格数据', row);

  // downloadLoading.value = true;
  parentOdj.value = row;
  let oParam = {
    moduleId: props.fileDetailInfo.id,
    type: props.fileDetailInfo.libraryType,
    // storageId: row.storageId ? row.storageId : '',
    page: requestStr.page - 1,
    size: requestStr.size
  };

  ApiPerDownloadRecord(oParam)
    .then((res) => {
      downloadLoading.value = false;
      if (res.code == 200) {
        downloadLoading.value = false;
        tableData.value = res.rows;
        requestStr.total = res.total;
      }
    })
    .catch((err) => {
      downloadLoading.value = false;
    });
};

// 分页
const handleCurrentChange = (val) => {
  requestStr.page = val;
  getList(parentOdj);
};

defineExpose({
  //调用组件需要导出 v-model的变量
  getList
});
</script>

<style scoped lang="scss">
.table_box {
  :deep(th) {
    color: #666;
    font-weight: normal;
    font-size: 14px;
    height: 51px;
  }
  :deep(tr) {
    color: #333;
    height: 51px;
  }

  :deep(.el-table__body tr:hover .realName_box_right) {
    visibility: visible;
  }
}
.peopleBox {
  display: flex;
  align-items: center;
  .people {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background-color: #56abfb;
    margin-right: 3px;
    span {
      display: inline-block;
      margin-top: 2px;
      transform: scale(0.9, 0.9);
    }
  }
}
</style>
